<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-cell>
      <van-image
        slot="icon"
        round
        width="30"
        height="30"
        style="margin-right: 10px"
        :src="comment.aut_photo"
      />
      <span style="color: #466b9d" slot="title">{{ comment.aut_name }}</span>
      <div slot="label">
        <p style="color: #363636">{{ comment.content }}</p>
        <p>
          <span style="margin-right: 10px">{{
            comment.pubdate | relativeTime
          }}</span>
          <van-button
            size="mini"
            type="default"
            @click="$emit('reply-click', comment)"
            >回复{{ comment.reply_count }}</van-button
          >
        </p>
      </div>
      <van-icon
        slot="right-icon"
        :name="comment.is_liking ? 'good-job' : 'good-job-o'"
        @click="onCommentLike"
        :loading="commentLoading"
        >{{ comment.like_count || '攒' }}</van-icon
      >
    </van-cell>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <!-- <van-cell-group class="publish-wrap">
      <van-field clearable placeholder="请输入评论内容">
        <van-button slot="button" size="mini" type="info">发布</van-button>
      </van-field>
    </van-cell-group> -->
    <!-- /发布评论 -->
  </div>
</template>

<script>
import { addLike, deleteLike } from '@/api/comments'
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      commentLoading: false
    }
  },

  methods: {
    async onCommentLike () {
      this.commentLoading = true
      try {
        if (this.comment.is_liking) {
          await deleteLike(this.comment.com_id)
          this.comment.like_count--
        } else {
          await addLike(this.comment.com_id)
          this.comment.like_count++
        }
        this.comment.is_liking = !this.comment.is_liking
      } catch (err) {
        this.$toast('操作失败，请重试')
      }
      this.commentLoading = false
    }
    //   onLoad () {
    //     // 异步更新数据
    //     setTimeout(() => {
    //       for (let i = 0; i < 10; i++) {
    //         this.list.push(this.list.length + 1)
    //       }
    //       // 加载状态结束
    //       this.loading = false

    //       // 数据全部加载完成
    //       if (this.list.length >= 40) {
    //         this.finished = true
    //       }
    //     }, 500)
    //   }
  }
}
</script>

<style scoped lang="less">
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.van-list {
  margin-bottom: 45px;
}
</style>
